<template>
  <div>
    <el-form  ref="ruleForm"  class="demo-ruleForm" size="mini">
      <el-form-item  style="width: 400px">
          <span slot="label">
      	<span style="font-size: 15px">课程名称（15字以内）</span>
        </span>
        <el-input v-model="form.coursename" maxlength="15"  show-word-limit></el-input>
      </el-form-item>
      <el-form-item>
        <span style="font-size: 15px">课程图片</span>
        <el-upload
          class="upload-demo"
          ref="upload"
          action="/photo/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :file-list="fileList"
          :on-success="success"
          :multiple="false"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500KB</div>
        </el-upload>
      </el-form-item>
<el-row>
      <el-col :span="12">
   <el-form-item  style="width: 200px" >
          <span slot="label">
      	<span style="font-size: 15px">课程部位</span>
        </span>
        <el-input v-model="form.bodypart" maxlength="10"  show-word-limit></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
   <el-form-item  style="width: 200px" >
          <span slot="label">
      	<span style="font-size: 15px">器械需求</span>
        </span>
        <el-input v-model="form.apparatus" maxlength="10"  show-word-limit></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item  style="width: 200px" >
          <span slot="label">
      	<span style="font-size: 15px">课程难度</span>
        </span>
        <el-input v-model="form.intensity" maxlength="10"  show-word-limit></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="12">
      <el-form-item  style="width: 200px" >
          <span slot="label">
      	<span style="font-size: 15px">课程价格</span>
        </span>
        <el-input v-model="form.price" maxlength="10"  show-word-limit></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="24">
      <el-form-item  style="width: 200px" >
          <span slot="label">
      	<span style="font-size: 15px">课程阶段数</span>
        </span>
        <el-input v-model="form.stageamount" show-word-limit></el-input>
      </el-form-item>
      </el-col>
</el-row>
      <el-form-item  prop="desc">
            <span slot="label">
      	<span style="font-size: 15px">课程简介（50字内）</span>
        </span>
        <el-input type="textarea" v-model="form.brief" maxlength="50" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <el-col :span="24">
    <div style="display:flex;align-items:center;justify-content:center;margin-bottom: 30px;">
      <el-button>取消添加</el-button>
      <el-button type="primary" @click="sub()">确认添加</el-button>
    </div>
    </el-col>
  </div>
</template>

<script>
  export default {
    name: "addfood",
    data() {
      return {
        fileList: [],
        form: {
          url:null,
          coursename:"",
          brief:"",
          intensity:"",
          apparatus:"",
          bodypart:"",
          price:"",
          stageamount:"",
        }
      }
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      success(res) {
        this.form.url = res.data;
        console.log(this.form.url);
        this.$message.success('图片上传成功')
      },
      //上传文件让第二次覆盖第一的文件
      handleChange(file, fileList) {
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]]
        }
      },
      sub:function () {
        //   console.log(this.form);

        var data = {
          'adminid': 1,
          'coursename': this.form.coursename,
          'coursebrief': this.form.brief,
          'intensity': this.form.intensity,
          'coursephoto': this.form.url,
          'apparatus': this.form.apparatus,
          'bodypart': this.form.bodypart,
          'price': this.form.price,
          'stageamount': this.form.stageamount,
           'id':0
        };
        console.log(data)
        var url='/course';
        this.$axios.post(url,data)
          .then( (res)=> {
            if (res.data.code === 0) {
              this.$message({message:"上传成功！", type: 'success'})
              function myMessage() {
                location.reload(true);
              }
              setTimeout(myMessage, 1000);

            }
            else {
              this.$message({message:"上传失败！", type: 'error'})
            }
          }).catch(function (error) {
          console.log(error);
        } );
      },
    }
  }
</script>

<style scoped>

</style>
